<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>APP</title>
    <link rel="stylesheet" type="text/css" href="../assets/css/api.css"/>
    <link rel="stylesheet" type="text/css" href="../assets/css/common.css"/>
    <style type="text/css">
        * {
            -webkit-tap-highlight-color: transparent;
            outline: 0;
            margin: 0;
            padding: 0;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }

        #main, #footer {
            background-color: #ffffff;
        }

        .btn_primary {
            width: 40%;
            margin: 0 auto;
            margin-top: 4%;
            background-color: #1B82D1;
            color: #fff;
            padding: 10px 16px;
            border-radius: 30px;
            display: block;
            text-decoration: none;
        }

        .btn_primary:active {
            width: 40%;
            margin: 0 auto;
            margin-top: 4%;
            color: #fff;
            padding: 10px 16px;
            border-radius: 30px;
            display: block;
            background-color: #1773b8;
        }

        .__error_page {
            margin: 0 auto;
            min-width: 320px;
            max-width: 540px;
            background-color: #ffffff;
            /*position: absolute;*/
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            font-size: 16px;
            line-height: 1.5;
            -webkit-text-size-adjust: 100% !important;
            font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
            text-align: center;
        }
    </style>
</head>

<body>
<div id="wrap">
    <div id='header'>
        <div class="adpt"></div>
        <h1 id="title">网络异常</h1>
        <div class="adpt"></div>
    </div>

    <div id="main">
        <div class="__error_page">
            <img style="width: 70%;margin: 20% auto 10%;"
                 src="">
            <p style="color: #555555;">网络连接失败</p>
            <p style="font-size: 12px;color: #888;padding-top: 4px">请检查您的网络状态</p>
            <a href="javascript:;" class="btn_primary" onclick="refreshNetwork()" tapmode>重试</a>
        </div>
    </div>

    <div id="footer"></div>
</div>
</body>
<script type="text/javascript" src="../assets/js/api.js"></script>
<script type="text/javascript" src="../assets/js/common.js"></script>
<script type="text/javascript">


    function refreshNetwork() {

        if (jsFn.isOnline()) {
            jsFn.toast('网络已连接');
            jsFn.rebootApp();
        } else {
            jsFn.toast('网络未连接');
        }

    }

    apiready = function () {

        var header = $api.byId('header');
        var footer = $api.byId('footer');
        var headerH = $api.fixStatusBar(header);
        var footerH = $api.fixTabBar(footer);

        api.addEventListener({
            name: 'keyback'
        }, function (ret, err) {
            api.closeWidget();
        });

    };

</script>

</html>
